<template>
  <div class="pictureDetailPage">
    <!-- 图片展示区 -->
    <div style="flex: 3">
      <a-card title="图片预览" style="height: auto; max-width: 100%">
        <a-image style="max-height: 100vh; width: 100%; object-fit: contain" :src="picture.url" />
      </a-card>
    </div>
    <!-- 图片信息区 -->
    <div style="flex: 1; min-width: 300px">
      <a-card title="图片信息" style="height: auto; padding: 20px">
        <a-descriptions :column="1">
          <a-descriptions-item label="作者">
            <a-space>
              <a-avatar :size="32" :src="picture.user?.userAvatar" />
              <span style="font-weight: bold">{{ picture.user?.userName }}</span>
            </a-space>
          </a-descriptions-item>
          <a-descriptions-item label="名称">
            <span>{{ picture.name ?? '未命名' }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="简介">
            <span>{{ picture.introduction ?? '-' }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="标签">
            <!-- 标签容器 -->
            <div class="tags-container">
              <template v-if="picture.tags && picture.tags.length > 0">
                <a-tag v-for="tag in picture.tags" :key="tag" color="blue">
                  {{ tag }}
                </a-tag>
              </template>
              <template v-else> 无 </template>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="格式">
            <span>{{ picture.picFormat ?? '-' }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="文件尺寸">
            <span>{{ picture.picWidth + ' X ' + picture.picHeight + ' PX' }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="宽高比">
            <span>{{ picture.picScale ?? '-' }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="文件大小">
            <span>{{ formatSize(picture.picSize) }}</span>
          </a-descriptions-item>
        </a-descriptions>

        <a-space wrap style="margin-top: 20px">
          <a-button v-if="canEdit" type="default" @click="doEdit">
            编辑
            <template #icon>
              <EditOutlined />
            </template>
          </a-button>
          <a-button v-if="canEdit" danger @click="doDelete">
            删除
            <template #icon>
              <DeleteOutlined />
            </template>
          </a-button>
        </a-space>
      </a-card>
      <div class="download">
        <a-button type="primary" block @click="onDownload">立即下载</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 由于图片id是动态的，所以需要使用defineProps来定义props
import { computed, onMounted, ref } from 'vue'
import { deletePictureUsingDelete, getPictureByIdUsingGet } from '@/apis/PictureInterface.ts'
import { message } from 'ant-design-vue'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { downloadImage, formatSize } from '@/utils'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { useRouter } from 'vue-router'

const props = defineProps<{
  id: string | number
}>()

const picture = ref<API.PictureVO>({})

// 获取图片详情
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureByIdUsingGet({
      pictureId: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      picture.value = res.data.data
      console.log(picture.value)
    } else {
      message.error('获取图片详情失败，' + res.data.message)
    }
  } catch (e: any) {
    message.error('获取图片详情失败：' + e.message)
  }
}

onMounted(() => {
  fetchPictureDetail()
})

/**
 * 权限校验
 */
const loginUserStore = useLoginUserStore()
// 是否具有编辑权限
const canEdit = computed(() => {
  const loginUser = loginUserStore.loginUser
  // 未登录不可编辑
  if (!loginUser?.id) {
    return false
  }
  // 仅本人或管理员可编辑
  const user = picture.value.user || {}
  return loginUser.id === user.id || loginUser.userRole === 'admin'
})

const router = useRouter()
// 编辑
// 编辑
const doEdit = () => {
  router.push({
    path: '/edit_picture',
    query: {
      id: picture.value.id,
      spaceId: picture.value.spaceId
    }
  })
}


// 删除
const doDelete = async () => {
  const id = picture.value.id
  if (!id) {
    return
  }
  const res = await deletePictureUsingDelete({ pictureId: id })
  if (res.data.code === 0) {
    message.success('删除成功')
    router.push({
      path: `/`,
    })
  } else {
    message.error('删除失败')
  }
}

// 处理下载
const onDownload = () => {
  downloadImage(picture.value.url)
}
</script>

<style scoped>
.pictureDetailPage {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.pictureDetailPage .tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 标签之间的间距 */

}

.pictureDetailPage .download {
  flex: 1;
  margin-top: 20px;
  margin-bottom: 30px;
}
</style>
